<template>
    <div id='point-configuration'>
        <loading mode="full" v-if="loading"></loading>
        <h1 class="card-title">
            <span>出借管理</span>
            <div class="card-title__button"></div>
        </h1>
        <div class="order-form form-table">
             <div class="form-content">
                <div class="form-item">
                    <div class="form-item__key">放款人</div>
                    <div class="form-item__value">
                        <input type="tel" placeholder="请输入手机号码" v-model='lenders'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">姓名</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入姓名" v-model='lendersName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">拓展标签</div>
                    <div class="form-item__value" >
                            <select v-model="sort" class="sort">
                                <option value="">全部</option>
                                    <option v-for='item in this.allocation' :value="item">
                                        {{item}}
                                     </option>          
                            </select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">出借状态</div>
                    <div class="form-item__value" >
                            <select v-model="sort1" class="sort">
                                <option value="">全部</option>
                                <option value="PUBLISHING">出借中</option>
                                <option value="CLOSED">已经关闭</option>
                            </select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">开始时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime'></date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">结束时间</div>
                    <div class="form-item__value">
                         <date-picker
                                color='#757575'
                                :placeholder='`选择日期`' v-model='dataTime1'></date-picker>
                    </div>
                </div>
                 <div class="form-item">
                         <div class="form-item__key">排序规则</div>
                         <div class="form-item__value">
                             <select v-model="sort3" class="sort">
                                 <option value="">全部</option>
                                 <option value="1">创建时间由晚到早</option>
                             </select>
                        </div>
                 </div>
                           
            </div>
            <div  class="form-button"><span class="form-button__item button" @click='findAllLendRecord(1)'>搜索</span></div>
         </div>
         <el-table
                            ref="multipleTable"
                            :data="tableData3"
                            border
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <!-- <el-table-column
                            type="selection"
                            >
                            </el-table-column> -->
                            <el-table-column
                            prop="lendNo"
                            label="出借ID"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.lendNo'> {{ scope.row.lendNo }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="mobile"
                            label="手机"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.mobile'> {{ scope.row.mobile }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="realName"
                            label="姓名"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.realName'> {{ scope.row.realName }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="可借额度"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row'> {{ scope.row.lendAmountFrom |toYuan}}<b style='color:black;opacity:.5;'>&nbsp;-&nbsp;</b>{{ scope.row.lendAmountTo |toYuan}}</span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="createdAt"
                            label="创建时间"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.createdAt'> {{ timestampToDate(scope.row.createdAt) }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="viewCount"
                            label="浏览次数"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.viewCount'> {{ scope.row.viewCount }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applyCount"
                            label="申请人数"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.applyCount'> {{ scope.row.applyCount }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="拓展标签"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.allocationStatus'> {{ transform(scope.row.allocationStatus)}} </span>
                                   <span v-else>--</span>  
                                   <b style='color:black;opacity:.5;'>&nbsp;-&nbsp;</b>  
                                   <span v-if='scope.row.sysUserName'> {{ scope.row.sysUserName}} </span>
                                   <span v-else>--</span>               
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="lendState"
                            label="出借状态"
                            >
                                <template slot-scope="scope">
                                   <span v-if='scope.row.lendState'> {{ transformTwo(scope.row.lendState) }} </span>
                                   <span v-else>--</span>                
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                        size="small"
                                        type="text"
                                        @click='lenderStateSee(scope.$index, scope.row, scope)'
                                        >查看</el-button>
                                    </template>
                            </el-table-column>         
            </el-table>
            <pagination
                            :current-page='pageNo.pageNum'
                            :total-page='pageNo.totalPage'
                            @pageChange='findAllLendRecord'></pagination> 
            <modal
                        title="查看出借记录详情"
                        :show='watchSee'
                        @close='watchSee=false'
                        cancle-text=''
                        confirm-text=''          
                        reset-text=''    
                        >    
                         <tab-box>
                            <tab name='基本信息'>
                                <h1 class='h1'>
                                            <span class='userMessage'>用户基本信息</span>
                                </h1>
                                <ul>
                                    <li class="result-info__item">
                                            <div class="result-info__key">出借ID</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.lendId'>{{rowListLender.lendId}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>   
                                    <li class="result-info__item">
                                            <div class="result-info__key">放款人手机</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.mobile'>{{rowListLender.mobile}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>     
                                    <li class="result-info__item">
                                            <div class="result-info__key">放款人姓名</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.realName'>{{rowListLender.realName}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>  
                                    <li class="result-info__item">
                                            <div class="result-info__key">拓展标签</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.allocationStatus'>{{transform(rowListLender.allocationStatus)}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>  
                                    <li class="result-info__item">
                                            <div class="result-info__key">出借状态</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.lendState'>{{transformTwo(rowListLender.lendState)}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>    
                                    <li class="result-info__item">
                                            <div class="result-info__key">浏览次数</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.viewCount'>{{rowListLender.viewCount}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>  
                                    <li class="result-info__item">
                                            <div class="result-info__key">申请人数</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.applyCount'>{{rowListLender.applyCount}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>  
                                    <li class="result-info__item">
                                            <div class="result-info__key">可借额度</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender'>{{rowListLender.lendAmountFrom |toYuan}}<b style='color:black;opacity:.5;'>&nbsp;-&nbsp;</b>{{rowListLender.lendAmountTo |toYuan}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li> 
                                    <li class="result-info__item">
                                            <div class="result-info__key">可借时长</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender'>{{rowListLender.lendDaysFrom }}<b style='color:black;opacity:.5;'>&nbsp;-&nbsp;</b>{{rowListLender.lendDaysFrom }}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li>  
                                    <li class="result-info__item">
                                            <div class="result-info__key">年化</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.yearRate'>{{rowListLender.yearRate}}%</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li> 
                                    <li class="result-info__item">
                                            <div class="result-info__key">还款方式</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.repayWay'>{{rowListLender.repayWay}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li> 
                                    <li class="result-info__item">
                                            <div class="result-info__key">补充说明</div>
                                            <div class="result-info__value">
                                                <span v-if='rowListLender.addSay'>{{rowListLender.addSay}}</span>
                                                <span v-else>--</span>
                                            </div>
                                    </li> 
                                </ul>
                            </tab>
                            <tab name='申请记录'>
                                <table  width="100%">
                                        <thead class="table-list__head">
                                            <tr style='background:#ddd;'>
                                                <th width='16%'>借款人手机</th>
                                                <th width='16%'>借款人姓名</th>
                                                <th width='16%'>借款额度</th>
                                                <th width='16%'>借款时长</th>
                                                <th width='16%'>申请时间</th>
                                                <th width='16%'>借款状态</th>
                                            </tr>
                                        </thead>
                                         <tbody class='table-list__body have-border'>
                                            <tr v-for='item in radioResult'>
                                                <td style='text-align:center'>
                                                    <span v-if='item.mobile'>{{item.mobile}}</span>
                                                    <span v-else>--</span>                                                   
                                                </td> 
                                                <td style='text-align:center'>
                                                    <span v-if='item.realName'>{{item.realName}}</span>
                                                    <span v-else>--</span>                                                   
                                                </td>    
                                                <td style='text-align:center'>
                                                    <span v-if='item.borrowAmount'>{{item.borrowAmount}}</span>
                                                    <span v-else>--</span>                                                   
                                                </td> 
                                                <td style='text-align:center'>
                                                    <span v-if='item.borrowDays'>{{item.borrowDays}}</span>
                                                    <span v-else>--</span>                                                   
                                                </td> 
                                                <td style='text-align:center'>
                                                    <span v-if='item.createdAt'>{{timestampToDate(item.createdAt)}}</span>
                                                    <span v-else>--</span>                                                   
                                                </td> 
                                                <td style='text-align:center'>
                                                    <span v-if='item.borrowState'>{{transformThree(item.borrowState)}}</span>
                                                    <span v-else>--</span>                                                   
                                                </td> 
                                            </tr>
                                        </tbody>
                                    </table>
                                    <pagination
                                        :current-page='redioDatabled.pageNum'
                                        :total-page='redioDatabled.totalPage'
                                        @pageChange='ApplyRecord'></pagination> 
                            </tab>
                        </tab-box>                            
                        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'
    import echarts from 'echarts'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
            tabBox,
            tab
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
             lenders:'',
             lendersName:'',
             lendNo:'',
             sort:'',
             sort1:'',
             sort3:'',
             dataTime:'',
             dataTime1:'',
             allocation:{},
             tableData3:[],
             pageNo:[],
             watchSee:false,
             rowLenderId:'',
             rowListLender:[],
             radioResult:[],
             redioDatabled:[],
             rowLenderIdSecond:'',
             loading:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            transform(a){
                if(a=='ALLOCATED'){
                    return '已分配'
                }else if(a=='NOTALLOCATED'){
                    return '待分配'
                }else if(a=='HIGHSEAS'){
                    return '公海中'
                }
            },
            transformTwo(a){
                if(a=='PUBLISHING'){
                    return '出借中'
                }else if(a=='CLOSED'){
                    return '已经关闭'
                }
            },
            transformThree(a){
                if(a=='WAIT_BORROW'){
                    return '求借款中'
                }else if(a=='BORROW_SUCCESS'){
                    return '借款成功'
                }else if(a=='APPLY_REJECTED'){
                    return '申请拒绝'
                }else if(a=='BORROW_CLOSED'){
                    return '借款已关闭'
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
            },
                    // function
            // list 列表
            findAllLendRecord(num){
                this.loading=true
                allApi.findAllLendRecord(
                    {   
                        mobile:this.lenders,
                        lendNo:this.lendNo,
                        realName:this.lendersName,
                        allocationStatus:this.sort,
                        lendState:this.sort1,
                        createdAt:this.dataTime,
                        endTime:this.dataTime1,
                        rank:this.sort3,
                        pageSize:10,
                        pageNum:num
                    }
                )
                .then(result => {
                    console.log('111')
                    this.loading=false
                    this.pageNo=result
                    this.tableData3=result.list
                })
                .catch(error => {
                    this.loading=false
                    console.error(error)
                })
            }, 
            findAllAllocationStrNew(){
                allApi.findAllAllocationStrNew(
                    {}
                )
                .then(result => {
                    console.log('111')
                    this.allocation=result
                })
                .catch(error => {
                    console.error(error)
                })
            }, 
            lenderStateSee(index, row,scope){
                console.log(scope.row.lendId)
                // console.log(index,row)
                this.lendNo = row.lendNo
                this.rowLenderIdSecond=row.lendUserId
                this.rowLenderId = scope.row.lendId
                // console.log(this.rowLenderId)
                this.watchSee=true
                this.LendRecordCheck()
                this.ApplyRecord(1)
            },
            LendRecordCheck(){
                allApi.LendRecordCheck(
                    {
                        lendId:this.rowLenderId
                    }
                )
                .then(result => {
                    console.log('111')
                 this.rowListLender=result.list[0]
                })
                .catch(error => {
                    console.error(error)
                })
            }, 
            ApplyRecord(num){
                // this.loading=true
                allApi.ApplyRecord(
                    {
                        lendNo:this.lendNo,
                        pageSize:7,
                        pageNum:num
                    }
                )
                .then(result => {
                    console.log('111')
                    this.radioResult=result.list
                    this.redioDatabled=result
                })
                .catch(error => {
                    console.error(error)
                })
            }, 
          
        },
        created(){
            this.findAllAllocationStrNew()
            this.findAllLendRecord(1)
            
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #point-configuration{
        width:95%;
           .message-textarea{
            display: block;
            width: 500px;
            border:1px solid $sectionColor;
            padding:10px;
            margin-bottom: 10px;
            margin-left: 100px;
        }
        .el-button--text {
            color: #13ce66;
        }
        .h1{
            text-align:center;
            border:1px solid #ddd;
            background-color:#ddd;
        }
        .userMessage{
            font-size:15px;
            font-weight:normal;
            line-height:32px;
            color:black;
        }
   
    }
</style>
